<script setup>
import { computed, ref } from 'vue'

const flag = ref(true)

const interest = ref([])

const handleRadioChange = e => {
  e.target.value = !e.target.value
}

const handleCheckboxChange = e => {
  if (!interest.value.includes(e.target.value)) {
    interest.value = [...interest.value, e.target.value]
  } else {
    interest.value = interest.value.filter(item => item !== e.target.value)
  }
}
</script>

<template>
  <main>
    <h1>{{ flag }}</h1>

    <div class="space-x-2">
      <label>
        <input type="radio" v-model="flag" value="true" />
      </label>
      <label>
        <input type="radio" v-model="flag" :value="false" @change="handleRadioChange" />
      </label>
    </div>

    <h2>兴趣:{{ interest.join(',') }}</h2>
    <div>
      <input type="checkbox" id="coding" value="编码" v-model="interest" />
      <label for="coding">编码</label>
    </div>
    <div>
      <input type="checkbox" id="music" :value="'音乐'" @change="handleCheckboxChange" />
      <label for="music">音乐</label>
    </div>
  </main>
</template>
